<template>
  <div class="facebook">
    <header>
      <span @click="$back()">
        <el-icon color="#fff" size="18">
          <ArrowLeftBold />
        </el-icon>
      </span>
      <strong>{{ $t("language.feedbook.name") }}</strong>
      <span @click="$openPage('/kefu')">
        <NuxtImg src="/img/kefu.png" alt="" />
      </span>
    </header>
    <main class="facebook">
      <div class="input">
        <dl>
          <dd v-for="(item, index) in list" :key="index" :class="activeindex == index ? 'active' : ''"
            @click="activeindex = index">
            {{ $t(item) }}
          </dd>
        </dl>
        <el-form :model="feedbook" ref="feedbookfrom" label-width="0" style="width: 100%">
          <el-form-item prop="content" :rules="{
        required: true,
        message: $t('language.commontips.empty'),
        trigger: 'blur',
      }">
            <el-input v-model="feedbook.content" :rows="10" type="textarea"
              :placeholder="$t('language.feedbook.placehold')" />
          </el-form-item>
        </el-form>
      </div>
      <el-button :loading="loading" :disabled="loading" class="btn" @click="submit">{{ $t('language.feedbook.submit')
        }}</el-button>
      <span></span>
    </main>
  </div>
</template>
<script setup lang="ts">
import { ArrowLeftBold } from '@element-plus/icons-vue'
import { ref, reactive, shallowRef, computed } from "vue";
let activeindex = shallowRef<number>(0);
import { useI18n } from "vue-i18n";
const { t } = useI18n();
let store = useStore()
let info = computed(() => store.userinfo)
let feedbook = reactive<{ id: number, content: string }>({
  id: info.value.gameID,
  content: "",
});
let list = shallowReactive<string[]>(["language.feedbook.feedbookitem1", "language.feedbook.feedbookitem2", "language.feedbook.feedbookitem3"]);
let loading = shallowRef<boolean>(false);
let feedbookfrom = ref<null | any>(null);
let submit = ():void => {
  feedbookfrom.value.validate((val: any) => {
    if (val) {
      loading.value = true;
      useHttpPOST(`/UserCenter/v1.0/User/Feedback`, feedbook)
        .then(({ data }: { data: any }) => {
          ElMessage.success({
            message: t("language.commontips.submittip"),
            type: "success",
            duration: 1000,
          });
        })
        .finally(() => {
          loading.value = false;
        });
    }
  });
};
</script>
<style scoped lang="scss">
:deep(.el-textarea__inner) {
  color: #fff;
}

header {
  width: 100vw;
  height: 45px;
  box-sizing: border-box;
  position: fixed;
  left: 0;
  top: 0;
  @include flex(row, space-between, center);
  background-color: rgb(36, 39, 43);
  padding: 0 20px;
  color: #fff;

  span {
    display: block;
    height: 28px;
    @include flex(row, center, center);
    width: 28px;
    line-height: 28px;
    cursor: pointer;

    img {
      width: 100%;
      height: 100%;
    }
  }
}

.facebook {
  background-color: #1a1a1a;
  padding: 45px 5px 90px;
  width: 100%;
  min-height: 100vh;
  background-color: rgb(26, 26, 26);

  .input {
    padding: 20px;

    :deep(.el-textarea__inner) {
      background-color: rgb(21, 21, 23) !important;
      border: none !important;
      box-shadow: none;
      width: 100% !important;
    }

    dl {
      @include flex(row, flex-start, center);

      dd {
        padding: 0 20px;
        cursor: pointer;
        height: 40px;
        line-height: 40px;
        font-size: 14px;
        color: #b5bab8;
      }

      .active {
        background-color: rgb(21, 21, 23);
        border-top-left-radius: 7px;
        border-top-right-radius: 7px;
      }
    }
  }

  .btn {
    background: #0a906c;
    color: #fff;
    padding: 0 15px;
    border: none;
    border-radius: 5px;
    text-align: center;
    display: block;
    height: 40px;
    line-height: 40px;
    width: 150px;
    font-size: 16px;
    margin: 0 auto;
  }
}
</style>
